import {createApp, reactive, computed} from "../../../js/vue.esm-browser.js";

let app = createApp(
    {
        setup() {
            let books = reactive(
                [
                    {
                        id: 1,
                        name: "算法导论",
                        price: 128.98,
                        count: 1
                    },
                    {
                        id: 2,
                        name: "Java Programming Language",
                        price: 199.98,
                        count: 1
                    },
                    {
                        id: 3,
                        name: "Introduction to JavaScript",
                        price: 86.98,
                        count: 1
                    },
                    {
                        id: 4,
                        name: "CSS in action",
                        price: 32.8,
                        count: 1
                    },
                    {
                        id: 5,
                        name: "Vue modern design",
                        price: 126.98,
                        count: 1
                    },
                    {
                        id: 6,
                        name: "Responsive Page",
                        price: 45.29,
                        count: 1
                    }

                ]
            )

            let total = computed(
                () => {
                    let sum = 0
                    for (let i = 0; i < books.length; i++) {
                        sum += books[i].price * books[i].count
                    }

                    return sum.toFixed(2)
                }
            )

            return {
                books,
                total,
            }
        }
    }
);

app.mount("#app")